<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Radial Layout</title>
  </head>

  <body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script src="./assets/d3-4.13.0.min.js"></script>
    <script src="../build/radial.js"></script>
    <script>
      const data = {
        nodes: [
          {
            id: '0',
            label: '0',
            sortAttr: 0,
            sortAttr2: 'a',
          },
          {
            id: '1',
            label: '1',
            sortAttr: 0,
            sortAttr2: 'a',
          },
          {
            id: '2',
            label: '2',
            sortAttr: 0,
            sortAttr2: 'a',
          },
          {
            id: '3',
            label: '3',
            sortAttr: 0,
            sortAttr2: 'a',
          },
          {
            id: '4',
            label: '4',
            sortAttr: 2,
            sortAttr2: 'c',
          },
          {
            id: '5',
            label: '5',
            sortAttr: 0,
            sortAttr2: 'a',
          },
          {
            id: '6',
            label: '6',
            sortAttr: 1,
            sortAttr2: 'b',
          },
          {
            id: '7',
            label: '7',
            sortAttr: 1,
            sortAttr2: 'b',
          },
          {
            id: '8',
            label: '8',
            sortAttr: 2,
            sortAttr2: 'c',
          },
          {
            id: '9',
            label: '9',
            sortAttr: 3,
            sortAttr2: 'd',
          },
          {
            id: '10',
            label: '10',
            sortAttr: 3,
            sortAttr2: 'd',
          },
          {
            id: '11',
            label: '11',
            sortAttr: 1,
            sortAttr2: 'b',
          },
          {
            id: '12',
            label: '12',
            sortAttr: 2,
            sortAttr2: 'c',
          },
          {
            id: '13',
            label: '13',
            sortAttr: 1,
            sortAttr2: 'b',
          },
          {
            id: '14',
            label: '14',
            sortAttr: 3,
            sortAttr2: 'd',
          },
          {
            id: '15',
            label: '15',
            sortAttr: 3,
            sortAttr2: 'd',
          },
          {
            id: '16',
            label: '16',
            sortAttr: 1,
            sortAttr2: 'b',
          },
          {
            id: '17',
            label: '17',
            sortAttr: 2,
            sortAttr2: 'c',
          },
          {
            id: '18',
            label: '18',
            sortAttr: 2,
            sortAttr2: 'c',
          },
          {
            id: '19',
            label: '19',
            sortAttr: 1,
            sortAttr2: 'b',
          },
          {
            id: '20',
            label: '20',
            sortAttr: 1,
            sortAttr2: 'b',
          },
          {
            id: '21',
            label: '21',
            sortAttr: 3,
            sortAttr2: 'd',
          },
          {
            id: '22',
            label: '22',
            sortAttr: 3,
            sortAttr2: 'd',
          },
          {
            id: '23',
            label: '23',
            sortAttr: 3,
            sortAttr2: 'd',
          },
          {
            id: '24',
            label: '24',
            sortAttr: 0,
            sortAttr2: 'a',
          },
          {
            id: '25',
            label: '25',
            sortAttr: 0,
            sortAttr2: 'a',
          },
          {
            id: '26',
            label: '26',
            sortAttr: 1,
            sortAttr2: 'b',
          },
          {
            id: '27',
            label: '27',
            sortAttr: 1,
            sortAttr2: 'b',
          },
          {
            id: '28',
            label: '28',
            sortAttr: 3,
            sortAttr2: 'd',
          },
          {
            id: '29',
            label: '29',
            sortAttr: 2,
            sortAttr2: 'c',
          },
          {
            id: '30',
            label: '30',
            sortAttr: 2,
            sortAttr2: 'c',
          },
          {
            id: '31',
            label: '31',
            sortAttr: 1,
            sortAttr2: 'b',
          },
          {
            id: '32',
            label: '32',
            sortAttr: 1,
            sortAttr2: 'b',
          },
          {
            id: '33',
            label: '33',
            sortAttr: 0,
            sortAttr2: 'a',
          },
        ],
        edges: [
          {
            source: '0',
            target: '1',
          },
          {
            source: '0',
            target: '2',
          },
          {
            source: '0',
            target: '3',
          },
          {
            source: '0',
            target: '4',
          },
          {
            source: '0',
            target: '5',
          },
          {
            source: '0',
            target: '7',
          },
          {
            source: '0',
            target: '8',
          },
          {
            source: '0',
            target: '9',
          },
          {
            source: '0',
            target: '10',
          },
          {
            source: '0',
            target: '11',
          },
          {
            source: '0',
            target: '13',
          },
          {
            source: '0',
            target: '14',
          },
          {
            source: '0',
            target: '15',
          },
          {
            source: '0',
            target: '16',
          },
          {
            source: '2',
            target: '3',
          },
          {
            source: '4',
            target: '5',
          },
          {
            source: '4',
            target: '6',
          },
          {
            source: '5',
            target: '6',
          },
          {
            source: '7',
            target: '13',
          },
          {
            source: '8',
            target: '14',
          },
          {
            source: '9',
            target: '10',
          },
          {
            source: '10',
            target: '22',
          },
          {
            source: '10',
            target: '14',
          },
          {
            source: '10',
            target: '12',
          },
          {
            source: '10',
            target: '24',
          },
          {
            source: '10',
            target: '21',
          },
          {
            source: '10',
            target: '20',
          },
          {
            source: '11',
            target: '24',
          },
          {
            source: '11',
            target: '22',
          },
          {
            source: '11',
            target: '14',
          },
          {
            source: '12',
            target: '13',
          },
          {
            source: '16',
            target: '17',
          },
          {
            source: '16',
            target: '18',
          },
          {
            source: '16',
            target: '21',
          },
          {
            source: '16',
            target: '22',
          },
          {
            source: '17',
            target: '18',
          },
          {
            source: '17',
            target: '20',
          },
          {
            source: '18',
            target: '19',
          },
          {
            source: '19',
            target: '20',
          },
          {
            source: '19',
            target: '33',
          },
          {
            source: '19',
            target: '22',
          },
          {
            source: '19',
            target: '23',
          },
          {
            source: '20',
            target: '21',
          },
          {
            source: '21',
            target: '22',
          },
          {
            source: '22',
            target: '24',
          },
          {
            source: '22',
            target: '25',
          },
          {
            source: '22',
            target: '26',
          },
          {
            source: '22',
            target: '23',
          },
          {
            source: '22',
            target: '28',
          },
          {
            source: '22',
            target: '30',
          },
          {
            source: '22',
            target: '31',
          },
          {
            source: '22',
            target: '32',
          },
          {
            source: '22',
            target: '33',
          },
          {
            source: '23',
            target: '28',
          },
          {
            source: '23',
            target: '27',
          },
          {
            source: '23',
            target: '29',
          },
          {
            source: '23',
            target: '30',
          },
          {
            source: '23',
            target: '31',
          },
          {
            source: '23',
            target: '33',
          },
          {
            source: '32',
            target: '33',
          },
        ],
      };

      const usingData = data;
      focusNode = usingData.nodes[0];
      focusNode.style = {
        fill: '#0a0',
      };

      const graph = new G6.Graph({
        container: 'mountNode',
        width: 1000,
        height: 600,
        layout: {
          type: 'radial',
          center: [500, 300],
          maxIteration: 1000,
          focusNode,
          unitRadius: 100,
          linkDistance: 10,
          preventOverlap: true,
          nodeSize: 30,
          sortBy: 'sortAttr2',
          sortStrength: 50,
        },
        modes: {
          default: ['drag-node'],
        },
        // defaultNode: {
        //   size: [20, 20],
        //   color: 'steelblue',
        //   style: {
        //     lineWidth: 2,
        //     fill: '#fff'
        //   }
        // },
        defaultEdge: {
          size: 1,
          color: '#e2e2e2',
          style: {
            endArrow: {
              path: 'M 4,0 L -4,-4 L -4,4 Z',
              d: 4,
            },
          },
        },
        nodeStateStyle: {
          selected: {
            fill: 'steelblue',
          },
        },
      });
      const colors = ['steelblue', 'green', 'pink', 'yellow'];
      const colorsObj = { a: 'steelblue', b: 'green', c: 'pink', d: 'yellow' };
      usingData.nodes.forEach(node => {
        node.size = 20;
        node.style = {
          lineWidth: 2,
          fill: '#fff',
          stroke: colors[node.sortAttr2] || colorsObj[node.sortAttr2],
        };
      });
      graph.data(usingData);
      graph.render();
    </script>
  </body>
</html>
